<template>
  <div class="game_currency_goods">
    <div class="title"><span></span>{{shopName}}</div>
    <div class="search-box">
      <Row type="flex">
        <Row type="flex"
             justify="start"
             class="search-item-left">
          <Col class="search-item"><span class="search-label">销售渠道：</span>
          <Select v-model="searchObj.channelId"
                  @on-change="seleted"
                  style="width:180px"
                  placeholder='请选择'>
            <Option v-for="item in saleList"
                    :value="item.id"
                    :key="item.id">{{ item.value }}</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <span class="search-label">当前状态：</span>
          <Select v-model="searchObj.channelGoodsStatus"
                  @on-change="seleted"
                  style="width:180px"
                  placeholder='请选择'>
            <Option v-for="item in statusList"
                    :value="item.id"
                    :key="item.id">{{ item.value }}</Option>
          </Select>
          </Col>
          <Col class="search-item"><span class="search-label">商品标题：</span><Input placeholder="请输入"
                 v-model='searchObj.title'></Input></Col>
          <Col class="search-item">
          <Button class="search-btn"
                  type='primary'
                  @click="search">查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  @click="reset">重置</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Table stripe
           class="table-list"
           :columns="columns"
           :data="tableData"
           :loading="loading"
           :height="tableHeight">
      <template slot-scope="{ row }"
                slot="goodskind">
        <span>{{(row.goodsKindList[1]||{}).typeName}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="standardPrice">
        <span>{{returnFloat(row.goodsPrices[0].amount)}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="channelId">
        <span>{{{'2':'一体机','1':'收银台','4':'微信商城'}[row.channelId]}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="listingAt">
        <span>{{row.listingAt+' ~ '+row.delistingAt}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="inventory">
        <span>{{row.inventory===-1?'不限':row.inventory}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="action">
        <span>{{['未上架','已上架','已下架'][row.channelGoodsStatus]}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="sold">
        <Poptip confirm
                title="你确定要下架吗？"
                @on-ok="ok(row)"
                v-if="row.channelGoodsStatus===1"
                @on-cancel="cancel">
          <i class="iconsys iconxiajia"
             title="下架"></i>
        </Poptip>
      </template>
    </Table>
    <Row type='flex'
         justify="end"
         style='padding: 20px'>
      <Col>
      <Page :total="pageObj.total"
            :page-size='pageObj.pageSize'
            :current='pageObj.pageIndex'
            :page-size-opts='[20,50,100,200]'
            show-total
            show-sizer
            @on-change='changePageIndex'
            @on-page-size-change='changePageSize' />
      </Col>
    </Row>
  </div>
</template>
<script>
import { getchannelGoodsList, editChannelList } from '@/api/merchandise/index'
import { returnFloat } from '@/libs/tools'
export default {
  name: 'game_currency_goods',
  data () {
    return {
      typeList: [],
      returnFloat: returnFloat,
      pageObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      channelId: { '1': '2', '2': '1', '3': '4' },
      shopName: this.$route.query.name,
      saleList: [
        { id: 1, value: '一体机' },
        { id: 2, value: '收银台' },
        { id: 3, value: '微信商城' }
      ],
      statusList: [
        { id: 2, value: '已下架' },
        { id: 1, value: '已上架' }
      ],
      columns: [
        {
          title: '商品标题',
          key: 'title'
        },
        {
          title: '游戏币分类',
          slot: 'goodskind'
        },
        {
          title: '销售渠道',
          slot: 'channelId'
        },
        {
          title: '平台价(元)',
          slot: 'standardPrice'
        },
        {
          title: '可售库存',
          slot: 'inventory'
        },
        {
          title: '上下架时间',
          slot: 'listingAt'
        },
        {
          title: '状态',
          slot: 'action'
        },
        {
          title: '操作时间',
          key: 'operatedAt'
        },
        {
          title: '操作',
          slot: 'sold',
          width: 150
        }
      ],
      tableData: [],
      loading: false,
      searchObj: {
        channelId: 1,
        channelGoodsStatus: 1,
        title: ''
      }
    }
  },
  mounted () {
    this.getList()
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'game_currency_goods') {
        this.getList()
      }
    }
  },
  computed: {
    tableHeight () {
      let height = this.tableData.length > 10 ? 580 : 0
      return height
    }
  },
  methods: {
    seleted () {
      this.pageObj.pageIndex = 1
      this.getList()
    },
    reset () {
      this.searchObj = {
        channelId: 1,
        channelGoodsStatus: 1,
        title: ''
      }
      this.pageObj.pageIndex = 1
      this.getList()
    },
    search () {
      this.pageObj.pageIndex = 1
      this.getList()
    },
    // 下架
    ok (row) {
      editChannelList({
        merchantId: this.$store.state.user.merchantId,
        channelGoodsId: row.channelGoodsId,
        updater: this.$store.state.user.userId,
        updaterName: this.$store.state.user.userName,
        listingType: 2
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('下架成功')
          this.pageObj.pageIndex = 1
          this.getList()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    cancel () {

    },
    getList () {
      getchannelGoodsList({
        merchantId: this.$store.state.user.merchantId,
        goodsKind: '01',
        offset: (this.pageObj.pageIndex - 1) * this.pageObj.pageSize,
        limit: this.pageObj.pageSize,
        shopId: this.$route.query.id,
        channelGoodsStatus: this.searchObj.channelGoodsStatus,
        title: this.searchObj.title,
        channelId: this.channelId[this.searchObj.channelId]
      }).then(res => {
        if (res.data.status === 200) {
          if (res.data.data) {
            this.tableData = res.data.data.goods || []
            this.pageObj.total = res.data.data.total
          } else {
            this.tableData = []
            this.pageObj.total = 0
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 改变页码
    changePageIndex (pageIndex) {
      this.pageObj.pageIndex = pageIndex
      this.getList()
    },
    // 改变大小
    changePageSize (pageSize) {
      this.pageObj.pageSize = pageSize
      this.getList()
    }
  }
}
</script>
<style lang="less" scoped>
.game_currency_goods {
  .title {
    font-size: 14px;
    color: #464c5b;
    letter-spacing: 0;
    line-height: 20px;
    padding: 24px;
    > span {
      display: inline-block;
      background: #2d8cf0;
      height: 20px;
      width: 8px;
      vertical-align: top;
      margin-right: 10px;
    }
  }
}
</style>
